<template>
  <div class="app-container">
    <div class="vipTips" v-if="!isVip">
      <div class="vipTips-title">
        会员已到期,到期后仍可访问,部分功能不可使用,建议尽快购买会员.
      </div>
      <div>
        <el-button size="default" plain @click="qrShow">联系客服</el-button>
      </div>
    </div>
    <div class="indexTop">
      <div class="top-left">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{ briTitle }}
            <i class="iconfont icon-xiala"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="briTimeChange(item)"
              v-for="item in TimeOptions"
              :key="item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click" style="margin-left: 20px">
          <span class="el-dropdown-link">
            {{ briUserTitle }}
            <i class="iconfont icon-xiala"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="briUserChange(item)"
              v-for="item in UserOptions"
              :key="item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="top-right">
        <div v-if="disabled">
          <el-button type="primary" size="default" @click="editIndex">
            编辑首页
          </el-button>
        </div>
        <div v-else>
          <el-button type="primary" size="default" @click="resetIndex">
            取消
          </el-button>
          <el-button type="primary" size="default" @click="sortSubmit">
            确定
          </el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <draggable
        v-model="comArr"
        chosenClass="active"
        animation="500"
        :disabled="disabled"
        class="content-left"
      >
        <div v-for="(item, index) in comArr" :key="index">
          <keep-alive>
            <component
              :is="item.name"
              :disabled="disabled"
              :class="item.clazz"
              v-if="item.hidden !== true"
              :briTime="briTime"
              :briUser="briUser"
              :userIds="userIds"
              :timeVal="timeVal"
              :ref="item.name"
            ></component>
          </keep-alive>
        </div>
      </draggable>
      <draggable
        v-model="comRightArr"
        chosenClass="active"
        animation="500"
        :disabled="disabled"
        class="content-right"
      >
        <div v-for="(item, index) in comRightArr" :key="index">
          <keep-alive>
            <component
              :is="item.name"
              :disabled="disabled"
              :class="item.clazz"
              v-if="item.hidden !== true"
              :briTime="briTime"
              :briUser="briUser"
              :userIds="userIds"
              :timeVal="timeVal"
              :ref="item.name"
            ></component>
          </keep-alive>
        </div>
      </draggable>
      <!-- <div class="content-right">
        <calendar class="calendarIndex"></calendar>
        <notice class=""></notice>
      </div> -->
    </div>
    <!-- 时间选择 -->
    <el-dialog
      title="请选择时间"
      :visible.sync="timeShow"
      width="25%"
      @close="tiemClose"
    >
      <el-date-picker
        v-model="customTime"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <span slot="footer">
        <el-button @click="timeShow = false">取消</el-button>
        <el-button type="primary" @click="timeSubmit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 管理人员选择 -->
    <el-dialog
      title="人员选择"
      :visible.sync="treeShow"
      @close="userClose"
      width="30%"
    >
      <div class="TreeChioosse">
        <div class="TreeChioosse-tree">
          <div class="company" style="overflow: auto">
            <el-tree
              :data="data"
              accordion
              :props="defaultProps"
              @node-click="handleNodeClick"
              highlight-current
            >
              <template slot-scope="{ node, data }">
                <el-tooltip
                  effect="dark"
                  :content="node.label"
                  placement="top-start"
                >
                  <div class="tool">
                    <span class="comName">
                      {{ node.label }}
                    </span>
                  </div>
                </el-tooltip>
              </template>
            </el-tree>
          </div>
        </div>
        <div class="TreeChioosse-table">
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="姓名" prop="nickName"> </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="treeShow = false">取消</el-button>
        <el-button type="primary" @click="treeSubmit">确定</el-button>
      </span>
    </el-dialog>
    <cs-qr :dialog="dialog"></cs-qr>
  </div>
</template>
  
  <script>
import draggable from "vuedraggable";
import csQr from "../csQr/index.vue";
import { mapGetters } from "vuex";
import {
  orderExpress,
  trendChart,
  certificateAlert,
  treeselect,
  getTreeList,
  showAll,
  allSort,
  showCalendar,
} from "@/api/index";
import { checkVipExpiry } from "@/api/user";
import DataBoard from "./components/dataBoard.vue";
import Remind from "./components/remind.vue";
import Agency from "./components/agency.vue";
import Echarts from "./components/echarts.vue";
import Calendar from "./components/calendar.vue";
import Notice from "./components/notice.vue";
export default {
  name: "Index",
  components: {
    csQr,
    DataBoard,
    Remind,
    Agency,
    Echarts,
    draggable,
    Calendar,
    Notice,
  },
  computed: {
    ...mapGetters(["avatar"]),
  },
  filters: {
    negative: function (val) {
      val = Math.abs(val) + "%";
      return val;
    },
    positive: function (val) {
      val = Math.abs(val) + "%";
      return val;
    },
  },
  data() {
    return {
      comRightArr: [
        {
          name: "Calendar",
          clazz: "calendarIndex",
          hidden: false, //跟数据看板一样
        },
        {
          name: "Notice",
          clazz: "notiveIndex",
          hidden: false, //跟数据看板一样
        },
      ],
      comArr: [
        {
          name: "DataBoard",
          clazz: "boardIndex",
          hidden: false, //跟数据看板一样
        },
        {
          name: "Remind",
          clazz: "remindIndex",
          hidden: false, //跟数据看板一样
        },
        {
          name: "Agency",
          clazz: "agencyIndex",
          hidden: false, //跟数据看板一样
        },
        {
          name: "Echarts",
          clazz: "echartsIndex",
          hidden: false, //跟数据看板一样
        },
      ],
      disabled: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialog: {
        csQrShow: false,
      },
      isVip: true,
      multipleSelection: [], // 多选数组集合
      tableData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      userType: 1,
      treeShow: false,
      filterText: "",
      customTime: [],
      timeVal: [],
      timeVal1: [],
      timeShow: false,
      loading: false,
      type: "",
      expTime: 1,
      expUser: 11,
      briUser: 11,
      warning: 11,
      briTime: 1,
      typeMoney: 1,
      typeTime: 1,
      npData: {
        income: {
          date: 0,
          percentage: 0,
        },
        regist: {
          date: 0,
          percentage: 0,
        },
        expend: {
          date: 0,
          percentage: 0,
        },
        refund: {
          date: 0,
          percentage: 0,
        },
      },
      briData: {
        customer: {
          date: 0,
          percentage: 0,
        },
        contacts: {
          date: 0,
          percentage: 0,
        },
        opportunity: {
          date: 0,
          percentage: 0,
        },
        contract: {
          date: 0,
          percentage: 0,
        },
      },
      UserOptions: [
        {
          value: 11,
          label: "仅本人",
        },
        {
          value: 12,
          label: "本人及下属",
        },
        {
          value: 13,
          label: "仅本部门",
        },
        {
          value: 14,
          label: "本部门及下属部门",
        },
        {
          value: 0,
          label: "自定义",
        },
      ],
      TimeOptions: [
        {
          value: 1,
          label: "日",
        },
        {
          value: 2,
          label: "周",
        },
        {
          value: 3,
          label: "月",
        },
        {
          value: 4,
          label: "季",
        },
        {
          value: 5,
          label: "年",
        },
        {
          value: 0,
          label: "自定义",
        },
      ],
      typeOptions: [
        {
          value: 1,
          label: "收入",
        },
        {
          value: 2,
          label: "支出",
        },
      ],
      echartsTitle: "收入趋势图",
      typeTimeOPtions: [
        {
          value: 1,
          label: "周",
        },
        {
          value: 2,
          label: "月",
        },
        {
          value: 3,
          label: "年",
        },
      ],
      dataTime: [],
      dataPrice: [],
      warningData: {},
      userIds: [],
      userIds1: [],
      userIds2: [],
      orderTitle: "日",
      orderUserTitle: "仅本人",
      briTitle: "日",
      briUserTitle: "仅本人",
      warningTitle: "仅本人",
      echartsText: "收入",
      echartstime: "周",
    };
  },
  created() {
    this.getShowCom();
    this.getshowCalenda();
  },
  mounted() {},
  methods: {
    // 获取右边排序
    getshowCalenda() {
      showCalendar().then((res) => {
        console.log(res.data);
        this.comRightArr = res.data;
      });
    },
    // 取消
    resetIndex() {
      this.disabled = true;
      console.log(this.$refs);
      this.$refs["DataBoard"][0].getBoardData();
      this.getShowCom();
    },
    // 保存编辑首页
    sortSubmit() {
      this.disabled = true;
      this.allSort();
    },
    // 整体排序
    allSort() {
      let fd = new FormData();
      fd.append("dataBoardSortsAll", JSON.stringify(this.comArr));
      fd.append(
        "dataBoardSorts",
        JSON.stringify(this.$refs["DataBoard"][0].boardArr)
      );
      fd.append("dataBoardCalendar", JSON.stringify(this.comRightArr));
      allSort(fd).then((res) => {
        this.$message.success(res.msg);
        this.$refs["DataBoard"][0].getBoardData();
        this.getShowCom();
      });
    },
    // 获取组件
    getShowCom() {
      showAll().then((res) => {
        this.comArr = res.data;
      });
    },
    // 编辑首页
    editIndex() {
      this.disabled = false;
    },
    // 联系客服
    qrShow() {
      console.log(1);
      this.dialog.csQrShow = true;
      console.log(this.dialog.csQrShow);
    },
    getIsVip() {
      checkVipExpiry().then((res) => {
        this.isVip = res.data;
      });
    },
    // 时间自定义关闭
    tiemClose() {
      if (this.userType == 1) {
        if (this.timeVal.length == 0) {
          this.expTime = 1;
          this.orderTitle = "日";
          this.orderExpress();
        }
      } else if (this.userType == 2) {
        if (this.timeVal1.length == 0) {
          this.briTime = 11;
          this.briTitle = "日";
        }
      }
      this.customTime = [];
    },
    userClose() {
      if (this.userType == 1) {
        if (this.userIds.length == 0) {
          this.expUser = 11;
          this.orderUserTitle = "仅本人";
          this.orderExpress();
        }
      } else if (this.userType == 2) {
        if (this.userIds1.length == 0) {
          this.briUser = 11;
          this.briUserTitle = "仅本人";
        }
      } else if (this.userType == 3) {
        if (this.userIds2.length == 0) {
          this.warning = 11;
          this.warningTitle = "仅本人";
          this.certificateAlert();
        }
      }
    },
    // 时间确定
    timeSubmit() {
      this.timeVal = this.customTime;
      this.timeShow = false;
    },
    // 负责人选择之后切换
    treeSubmit() {
      if (this.userType == 1) {
        this.orderExpress();
        this.treeShow = false;
      } else if (this.userType == 2) {
        this.treeShow = false;
      } else if (this.userType == 3) {
        this.certificateAlert();
        this.treeShow = false;
      }
    },
    // 选择
    handleSelectionChange(val) {
      this.userIds = [];
      if (val.length !== 0) {
        val.forEach((item) => {
          this.userIds.push(item.userId);
          console.log(this.userIds);
        });
      }
    },
    // 获取部门人
    getdeptData(deptId) {
      getTreeList({
        status: "",
        deptId: deptId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 获取负责人
    treeselect() {
      treeselect().then((res) => {
        this.data = res.data;
        this.getdeptData(res.data[0].userId);
      });
    },
    // 树节点选择
    handleNodeClick(data) {
      this.getdeptData(data.id);
    },
    // 树节点筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 时间选择器清空
    // timeClose() {
    //   this.customTime = [];
    // },
    // 证书预警
    certificateAlert() {
      certificateAlert({
        userIds: this.userIds2,
        type: this.warning,
      }).then((res) => {
        this.warningData = res;
      });
    },
    // echaets 时间
    typeTimeChange(item) {
      this.typeTime = item.value;
      this.echartstime = item.label;
      this.trendChart();
      setTimeout(() => {
        this.drawLine();
      }, 1500);
    },
    // echaets 支出/付出
    typeMoneyChange(item) {
      this.typeMoney = item.value;
      if (item.value == 1) {
        this.echartsText = item.label;
        this.echartsTitle = "收入趋势图";
      } else if (item.value == 2) {
        this.echartsText = item.label;
        this.echartsTitle = "支出趋势图";
      }
      this.trendChart();
      setTimeout(() => {
        this.drawLine();
      }, 500);
    },
    // 预警切换
    warningChange(item) {
      if (item.value !== 0) {
        this.userIds2 = [];
        this.warning = item.value;
        this.userType = 3;
        this.warningTitle = item.label;
        this.certificateAlert();
      } else {
        this.treeselect();
        this.warningTitle = item.label;
        this.userType = 3;
        this.treeShow = true;
      }
    },
    // 销售简报负责人切换
    briUserChange(item) {
      if (item.value !== 0) {
        this.userIds1 = [];
        this.briUserTitle = item.label;
        this.briUser = item.value;
        this.userType = 2;
      } else {
        this.treeselect();
        this.briUser = item.value;
        this.briUserTitle = item.label;
        this.userType = 2;
        this.treeShow = true;
      }
    },
    // 销售简报时间切换
    briTimeChange(item) {
      if (item.value !== 0) {
        this.timeVal1 = [];
        this.briTime = item.value;
        this.briTitle = item.label;
        this.userType = 2;
      } else {
        this.briTime = item.value;
        this.briTitle = item.label;
        this.userType = 2;
        this.timeShow = true;
      }
    },
    // 订单快报负责人切换
    expUserChange(item) {
      if (item.value !== 0) {
        this.userIds = [];
        this.expUser = item.value;
        this.orderUserTitle = item.label;
        this.userType = 1;
        this.orderExpress();
      } else {
        this.treeselect();
        this.expUser = item.value;
        this.orderUserTitle = item.label;
        this.userType = 1;
        this.treeShow = true;
      }
    },
    // 订单快报日期切换
    expTimeChange(item) {
      if (item.value !== 0) {
        this.timeVal = [];
        this.expTime = item.value;
        this.orderTitle = item.label;
        this.userType = 1;
        this.orderExpress();
      } else {
        this.expTime = item.value;
        this.userType = 1;
        this.orderTitle = item.label;
        this.timeShow = true;
      }
    },
    // 获取echarts
    async trendChart() {
      this.loading = true;
      let res = await trendChart({
        type: this.typeMoney,
        timeUnit: this.typeTime,
      });
      console.log(res);
      this.dataTime = res.dates;
      this.dataPrice = res.totals;
      this.loading = false;
      // trendChart({
      //   type: this.typeMoney,
      //   timeUnit: this.typeTime,
      // }).then((res) => {
      // });
    },

    // 获取订单快报
    orderExpress() {
      orderExpress({
        userIds: this.userIds,
        timeUnit: this.expTime,
        type: this.expUser,
        times: this.timeVal,
      }).then((res) => {
        // console.log(res);
        this.npData = res;
        // this.console.log(res["income"]);
      });
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("echarts"));
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.dataTime,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.dataPrice,
              type: "line",
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1267fa", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFFFFF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              itemStyle: {
                normal: {
                  color: "#1267fa",
                  // background: 'linear-gradient(0deg, rgba(18, 103, 250, 0.01) 0%, #1267FA 100%)'
                },
              },
            },
          ],
          grid: {
            left: "20px",
            right: "20px",
            containLabel: true,
          },
        },
        true
      );
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>
  
<style lang="less" scoped>
.app-container {
  background-color: #f5f6f7;
  height: 92.4vh;
  overflow-y: auto;
}
.indexTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.content {
  margin-top: 24px;
}
.header-img {
  display: flex;
  align-items: center;
  width: 100%;
  height: 160px;
  background-size: 100% 100%;
  // padding-top: 47px;
  border-radius: 18px;
  margin-top: 24px;
  overflow: hidden;
  .header-img-left {
    // padding-top: 20px;
    height: 100%;
    width: 50%;
    background-color: #1c1c1c;
    line-height: 100%;
    display: flex;
    align-items: center;
    img {
      vertical-align: middle;
    }
    .header-img-left-text {
      margin-left: 34px;
      h1 {
        color: #fff;
        font-size: 30px;
        font-family: SourceHanSans-Heavy, SourceHanSans;
        font-weight: 800;
      }
      div {
        color: #ffffff;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .header-img-right {
    height: 100%;
    width: 50%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .right-img {
      position: absolute;
      top: 0;
      right: 25%;
      width: 357px;
      height: 100%;
    }
  }
  .avatar {
    width: 110px;
    height: 110px;
    border-radius: 110px;
    background-color: #fff;
    margin-left: 5%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 110%;
    }
  }
}
.newspaper {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  .expressNews-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .expressNews-top-title {
      font-size: 16px;
      font-weight: 700;
    }
    /deep/ .el-select {
      width: 120px;
      input {
        border: none;
      }
    }
    .el-select:nth-child(2) {
      width: 150px;
    }
  }
  .expressNews {
    padding: 24px;
    width: 49%;
    height: 170px;
    border-radius: 18px;
    background-color: #fff;
    .expressNews-detail {
      display: flex;
      justify-content: space-around;
      margin-top: 24px;
      .expressNews-detail-single {
        padding-top: 15px;
        height: 80px;
        width: 25%;
        padding-left: 20px;
        .expressNews-detail-single-top {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9aa1af;
        }
        .expressNews-detail-single-bottom {
          font-size: 26px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #1f2e4d;
          margin-top: 10px;
        }
      }
      .expressNews-detail-single:nth-child(-n + 3) {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
  }
  .briefing {
    width: 49%;
    height: 170px;
    border-radius: 18px;
    background-color: #fff;
    padding: 24px;
    .expressNews-top {
      display: flex;
      align-items: center;
    }
    .expressNews-top-title {
      font-size: 16px;
      font-weight: 700;
    }
    .expressNews-detail {
      display: flex;
      justify-content: space-around;
      margin-top: 24px;
      .expressNews-detail-single {
        padding-top: 15px;
        height: 80px;
        width: 25%;
        padding-left: 20px;
        .expressNews-detail-single-top {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9aa1af;
        }
        .expressNews-detail-single-bottom {
          font-size: 26px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #1f2e4d;
          margin-top: 10px;
        }
      }
      .expressNews-detail-single:nth-child(-n + 3) {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 30px;
  .footer-left {
    width: 30%;
    height: 462px;
    border-radius: 18px;
    background-color: #fff;
    padding: 24px;
    .footer-left-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/ .el-select {
        width: 150px;
        input {
          border: none;
        }
      }
    }
    .footer-left-title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 700;
      color: #2b2b2b;
    }
    .earlyWarning {
      width: 100%;
      height: 103px;
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      .earlyWarning-img {
        width: 46px;
        height: 46px;
        border-radius: 6px;
        img {
          width: 100%;
          height: 100%;
        }
        .earlyWarning-detail {
          margin-left: 24px;
          .earlyWarning-detail-num {
            font-size: 22px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #2b2b2b;
          }
          .earlyWarning-detail-info {
            margin-top: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            width: 200px;
          }
        }
        display: flex;
      }
      .earlyWarning-right {
        margin-top: 12px;
      }
    }
    .earlyWarning:nth-child(-n + 3) {
      border-bottom: 1px solid #ececec;
    }
  }
  .footer-right {
    box-sizing: border-box;
    border-radius: 18px;
    width: 68%;
    height: 462px;
    background-color: #fff;
    position: relative;
    padding: 14px;
    .footer-right-sel {
      z-index: 200;
      position: absolute;
      top: 24px;
      right: 24px;
      /deep/ .el-select {
        width: 80px;
        input {
          border: none;
        }
      }
    }
    #echarts {
      height: 100%;
    }
  }
}
.active {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3ccea8;
  margin-left: 12px;
}
.active1 {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f04d4c;
  margin-left: 12px;
}
.TreeChioosse {
  display: flex;
  justify-content: space-around;
  .TreeChioosse-tree {
    overflow: auto;
    height: 600px;
    width: 30%;
  }
  .TreeChioosse-table {
    width: 65%;
    .el-table {
      margin-top: 0;
      border-bottom: none !important;
    }
    .el-table::before {
      display: none;
    }
  }
}
.el-dropdown {
  margin-right: 10px;
}
.footer-right-title {
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 16px;
  font-weight: 700;
}
.el-dropdown-link {
  i {
    font-size: 14px !important;
  }
}
.vipTips {
  margin-top: 20px;
  padding: 20px;
  color: #fff;
  align-items: center;
  height: 70px;
  display: flex;
  background-color: #dc5049;
  border-radius: 10px;
  .el-button {
    color: #dc5049;
    border: none;
  }
  .vipTips-title {
    margin-right: 20px;
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.content {
  display: flex;
  justify-content: space-between;
}
.content-left {
  width: 1192px;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  .boardIndex {
    margin-top: 24px;
  }
  .remindIndex {
    margin-top: 24px;
  }
  .agencyIndex {
    margin-top: 24px;
  }
  .echartsIndex {
    margin-top: 24px;
  }
}
.content-right {
  .calendarIndex {
    margin-top: 24px;
  }
  .noticeIndex {
    margin-top: 24px;
  }
}
</style>